<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>search</title>
    <link th:href="@{/ecco/listshow/listshow.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/common/jquery/jquery.js}"></script>
    <link th:href="@{/common/layui-new/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/common/layui/admin.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/common/layui-new/layui/layui.js}"></script>
    <script th:src="@{/common/echarts.js}"></script>

    <style>
        .search_form{
            width:602px;
            height:42px;
        }

        /*左边输入框设置样式*/
        .input_text{
            width:400px;
            height: 40px;
            border:1px solid green;
            /*清除掉默认的padding*/
            padding:0px;

            /*提示字首行缩进*/
            text-indent: 10px;

            /*去掉蓝色高亮框*/
            outline: none;

            /*用浮动解决内联元素错位及小间距的问题*/
            float:left;
        }

        .input_sub{
            width:100px;
            height: 42px;
            background: green;

            /*去掉submit按钮默认边框*/
            border:0px;
            /*改成右浮动也是可以的*/
            float:left;
            color:white;/*搜索的字体颜色为白色*/
            cursor:pointer;/*鼠标变为小手*/
        }
    </style>

</head>
<body>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="header">
                    <div class="headerleft">
                        <h1>Lucene</h1>
                        <!--        <input type="button" value="新增版本">-->
                    </div>
                    <div class="headerright">
                        Apache Lucene set the standard for search and indexing performance. Lucene is the search core of both Apache Solr™ and Elasticsearch™.
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                相关功能推荐
                <a href="javascript:;" class="layui-a-tips" onclick="searchmore()">更多</a></div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
                            <p class="layui-text-center" onclick="showmodle()">LUCENE-3594:Try harder to prevent SIGSEGV on cloned MMapIndexInputs: Previous versions of Lucene could SIGSEGV the JVM if you try to access the clone of an IndexInput retrieved from MMapDirectory. This security fix prevents this as best as it can by throwing AlreadyClosedException also on clones.</p>
                            <p class="layui-text-bottom"><span>关键词:SIGSEGV，MMapDirectory</span></p>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
<!--                            <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a>关键词:CheckIndex，IndexUpgrader，FSDirectory</a></div>-->
                            <p class="layui-text-center">LUCENE-3774:CheckIndex and IndexUpgrader allow you to specify the specific FSDirectory implementation to use (with the new -dir-impl command-line option).</p>
                            <p class="layui-text-bottom"><span>LUCENE-2996:关键词:CheckIndex，IndexUpgrader，FSDirectory</span></p>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
<!--                            <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a>关键词:MTQ</a></div>-->
                            <p class="layui-text-center">LUCENE-3630:The internal method MultiReader.doOpenIfChanged(boolean doClone) was overriding IndexReader.doOpenIfChanged(boolean readOnly), so changing the contract of the overridden method. This method was renamed and made private. In ParallelReader the bug was not existent, but the implementation method was also made private.</p>
                            <p class="layui-text-bottom"><span>关键词:MultiReader，IndexReader</span></p>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
<!--                            <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a>关键词:IndexReader，CompoundFileExtractor</a></div>-->
                            <p class="layui-text-center">LUCENE-3520:IndexReader.openIfChanged, when passed a near-real-time reader, will now return null if there are no changes. The API has always reserved the right to do this; it's just that in the past for near-real-time readers it never did.
                                (Robert Muir, Mike McCandless)</p>
                            <p class="layui-text-bottom"><span>关键词:openIfChanged，ensureOpen</span></p>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
<!--                            <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a>关键词:NRTCachingDir，createOutput</a></div>-->
                            <p class="layui-text-center">LUCENE-2069: Added Unicode 4 support to LowerCaseFilter. Due to the switch to Java 5, supplementary characters are now lowercased correctly. LowerCaseFilter now requires a Version argument to preserve backwards compatibility. If Version < 3.1 is passed to the constructor, LowerCaseFilter yields the old behavior</p>
                            <p class="layui-text-bottom"><span>关键词:LowerCaseFilter，language</span></p>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm4">
                        <div class="layuiadmin-card-text">
<!--                            <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a>关键词:SentinelIntSet，loop，TermAllGroupsCollector</a></div>-->
                            <p class="layui-text-center">LUCENE-2863:SentinelIntSet with a small initial size can go into an infinite loop when expanded. This can affect grouping using TermAllGroupsCollector or TermAllGroupHeadsCollector if instantiated with a non default small size.</p>
                            <p class="layui-text-bottom"><span>关键词:SentinelIntSet，grouping</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header"></div>
            <div class="layui-card-body">
                <div style="display: none" id="treelist" ></div>
                <div class="demoTable">
                    搜索注释：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>

                <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">数据概览</div>
        </div>
        <div class="layui-card-body">
            <div id="main" style="width: 100%;height:450px;"></div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">数据概览</div>
        </div>
        <div class="layui-card-body">
            <div id="zhu" style="width: 100%;height:450px;"></div>
        </div>

    </div>
</div>
</div>
<ul id="heroLists" style="list-style: none;display: none;border: 1px solid silver;width: 130px;margin-top: 0"></ul>
</body>

<script type="text/javascript">
    function showmodle() {
        window.open("splitmodle")
    }
    function searchmore() {
        window.open("searchmore");
    }
</script>


<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '/ws/getComment'
            ,cols: [
                        [
                        {field:'modle', title: 'ReleaseID', width:200}
                        ,{field:'file', title: '文件名', width:200}
                        ,{field:'content', title: '注释', width:800}
                        ,{field:'time', title: '创建时间', sort: true, width:250}
                        ]
            ]
            ,id: 'testReload'
            ,page: true
            ,height: 310
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            modle: demoReload.val(),
                            file:demoReload.val()
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

<script>
    var listtree;
    layui.use(['layer','tree'],function () {
        listtree=layui.tree;
        var fixtree=listtree.render({
            id:'treeId'
            ,elem: '#treelist'  //绑定元素
            ,data: []
            ,onlyIconControl:true
            ,showLine:false
        });
    })
    setGraph('http://192.168.56.1:8888/ws/getAssociation','main');
    function setGraph(url,name){
        layui.use(['element','tree','layer'], function () {
            var listlayer=layui.layer;
            let element = layui.element;
            var chartDom = document.getElementById(name);
            var myChart = echarts.init(chartDom);
            myChart.off('click');
            var option;

            myChart.showLoading();
            $.getJSON(url, function (graph) {
                myChart.hideLoading();

                graph.nodes.forEach(function (node) {
                    node.label = {
                        show: node.name.indexOf('[')<0
                    };
                });
                option = {
                    tooltip: {},
                    legend: [{
                        // selectedMode: 'single',
                        data: graph.categories.map(function (a) {
                            return a.name;
                        })
                    }],
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [
                        {
                            name: 'Artifact',
                            type: 'graph',
                            layout: 'none',
                            data: graph.nodes,
                            links: graph.links,
                            categories: graph.categories,
                            roam: true,
                            hoverAnimation:false,
                            label: {
                                position: 'right',
                                formatter: '{b}'
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            },
                            emphasis: {
                                focus: 'adjacency',
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                var methodIndex;
                myChart.on('mouseover',{dataType: 'node'},function (params) {
                    var data=params.data;
                    $.ajax({
                        url: 'http://192.168.56.1:8888/ws/getListShowDetail?uuid='+data.associationId,
                        type: 'get',
                        dataType: 'JSON',
                        contentType: 'application/json',
                        success: function (data) {
                            var jsondata =[];
                            var count=0;
                            data.data.forEach(function (node) {
                                count++;
                                if (node.type==0){
                                    jsondata.push({title:count+'.<a style="color: #009688">'+node.methodname+'</a><a style="color:#c2c2c2;">'+node.classname+'</a>'})
                                    if (node.methodname.includes('clone()')){
                                        console.log('here')
                                    }
                                }else {
                                    jsondata.push({title:count+'.<a style="color: #FF5722">'+node.methodname+'</a><a style="color:#c2c2c2;">'+node.classname+'</a>'})
                                    if (node.methodname.includes('clone()')){
                                        console.log('here')
                                    }
                                }
                            })
                            layui.tree.reload('treeId',{data:jsondata.slice(0,100)});
                            // listlayer.close(methodIndex);
                            methodIndex=listlayer.open({
                                type:1
                                // ,title:'0-100(共'+data.data.length+'项)'
                                ,shade:0
                                ,content:$("#treelist")
                                ,area:['200px','400px']
                                ,moveOut:true
                                ,offset:'r'
                                ,closeBtn: 0
                            });
                            $(".layui-layer-title")[0].innerText='0-100(共'+data.data.length+'项)';
                        }
                    });

                })
            });
            option && myChart.setOption(option);

        });
    }
</script>
<script type="text/javascript">
    var chartDom = document.getElementById('zhu');
    var myChart = echarts.init(chartDom);
    var option;
    var colors = ['#2f4554', '#d48265','#c23531']; //三种状态的颜色

    var numer=['100','365', '500','939','1371','1386','1561','1810', '5000','5809','7464','10471','21000'];
    // echart配置
    var option = {
        color: colors,
        tooltip: {//提示框
            formatter: function (params) {
                return '节点数:'+numer[params.value[0]]+';\r'+params.name + ':' + params.value[1] + '~' + params.value[2];
            }//数据的值
        },
        // legend: {//图例
        //     data: state,
        //     bottom: '1%',
        //     selectedMode: false, // 图例设为不可点击
        //     textStyle: {
        //         color: '#000'
        //     }
        // },
        grid: {//绘图网格
            left: '3%',
            right: '3%',
            top: '1%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            name:'版本',
            type: 'category',
            data:['2.9.4','3.0.3','3.1.0','3.2.0','3.6.0']
        },
        yAxis: {
            name:'节点数',
            data: ['100','365', '500','939','1371','1386','1561','1810', '5000','5809','7464','10471','21000']
        },
        series: [
            // 用空bar来显示三个图例
            // { name: state[0], type: 'bar', data: [] },
            // { name: state[1], type: 'bar', data: [] },
            // { name: state[2], type: 'bar', data: [] },
            {
                type: 'custom',
                renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                    var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                    var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                    var end = api.coord([api.value(2), categoryIndex]);
                    var height = api.size([0, 1])[1];

                    return {
                        type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                        shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: height
                        }, { // 当前坐标系的包围盒。
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height
                        }),
                        style: api.style()
                    };
                },
                encode: {
                    x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
                    y: 0// data 中『维度0』对应到 Y 轴
                },
                data: [ // 维度0 维度1 维度2
                    {
                        itemStyle: { normal: { color: colors[0] } },//条形颜色
                        name: '生命周期',
                        value: [0, '2.9.4', '3.0.3']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '生命周期',
                        value: [1, '3.1.0', '3.6.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },
                        name: '生命周期',
                        value: [2, '2.9.4', '3.2.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },
                        name: '生命周期',
                        value: [3, '3.0.3', '3.1.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '生命周期',
                        value: [4, '3.1.0', '3.2.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },
                        name: '生命周期',
                        value: [5, '3.2.0', '3.6.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },
                        name: '生命周期',
                        value: [5, '2.9.4', '3.0.3']
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },
                        name: '生命周期',
                        value: [6, '3.6.0', '3.6.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '生命周期',
                        value: [7, '3.0.3', '3.1.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },
                        name: '生命周期',
                        value: [8, '2.9.4', '3.1.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },
                        name: '生命周期',
                        value: [9, '2.9.4', '3.2.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '生命周期',
                        value: [10, '3.0.3', '3.1.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },
                        name: '生命周期',
                        value: [11, '3.0.3', '3.6.0']
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },
                        name: '生命周期',
                        value: [12, '2.9.4', '3.6.0']
                    }
                ]
            }
        ]
    };
    option&&myChart.setOption(option);

</script>
</html>